<script setup lang="ts">
import { computed, watch } from "vue";
import { t } from "@/lang/i18n";
import { useTerminal } from "../../hooks/useTerminal";
import { useLayoutCardTools } from "@/hooks/useCardTools";
import { useScreen } from "@/hooks/useScreen";
import { useAppStateStore } from "@/stores/useAppStateStore";
import { useMountComponent } from "@/hooks/useMountComponent";
import { INSTANCE_TYPE_TRANSLATION } from "@/hooks/useInstance";
import { fetchConfigListAndFirstDetail } from "@/tools/fetchconfig";
// 组件导入
import CardPanel from "@/components/CardPanel.vue";
import InstanceBaseInfo from "@/widgets/instance/BaseInfo.vue";
import InstanceBtns from "@/widgets/instance/ManagerBtns.vue";
import InstanceFileManager from "@/widgets/instance/FileManager.vue";
import InstanceServerConfigOverview from "@/widgets/instance/ServerConfigOverview.vue";
import IconBtn from "@/components/IconBtn.vue";
import TerminalCore from "@/components/TerminalCore.vue";
import Reinstall from "./dialogs/Reinstall.vue";
import UseRedeemDialog from "@/components/fc/UseRedeemDialog.vue";

// TDesign 组件导入
import {
  Button as TButton,
  Space as TSpace,
  Alert as TAlert,
  Card as TCard,
  Row as TRow,
  Col as TCol,
  Tag as TTag,
  Badge as TBadge,
  Avatar as TAvatar,
  List as TList,
  Descriptions as TDescriptions,
  DescriptionsItem as TDescriptionsItem,
  Divider as TDivider,
  Typography as TTypography,
  Text as TText,
  Paragraph as TParagraph,
  Input as TInput,
  Table as TTable,
  Tabs as TTabs,
  TabPanel as TTabPanel,
  Dropdown as TDropdown,
  HeadMenu as THeadMenu,
  Popconfirm as TPopconfirm,
  Tooltip as TTooltip,
  Icon as TIcon,
  MessagePlugin
} from 'tdesign-vue-next';

// 图标导入
import {
  CloudDownloadOutlined,
  CloudServerOutlined,
  DownOutlined,
  PauseCircleOutlined,
  PlayCircleOutlined,
  RedoOutlined,
  LaptopOutlined,
  InteractionOutlined,
  LoadingOutlined,
  MoneyCollectOutlined,
  CheckCircleOutlined,
  InfoCircleOutlined,
  CloseOutlined
} from "@ant-design/icons-vue";

// 工具和常量导入
import { arrayFilter } from "../../tools/array";
import { reportErrorMsg } from "@/tools/validator";
import { GLOBAL_INSTANCE_NAME } from "../../config/const";
import { INSTANCE_STATUS } from "@/types/const";

// API 服务导入
import {
  openInstance,
  stopInstance,
  restartInstance,
  killInstance,
  updateInstance
} from "@/services/apis/instance";

// 类型导入
import type { LayoutCard } from "@/types";
import { TimeIcon } from "tdesign-icons-vue-next";

const props = defineProps<{
  card: LayoutCard;
}>();

// 组合式API使用
const { isPhone } = useScreen();
const { state, isAdmin } = useAppStateStore();
const { getMetaOrRouteValue } = useLayoutCardTools(props.card);
const {
  execute,
  state: instanceInfo,
  isStopped,
  isRunning,
  isBuys,
  isGlobalTerminal
} = useTerminal();

// 实例基本数据
const instanceId = getMetaOrRouteValue("instanceId");
const daemonId = getMetaOrRouteValue("daemonId");
const viewType = getMetaOrRouteValue("viewType", false);

// 组件引用
const reinstallDialog = ref<InstanceType<typeof Reinstall>>();

// IP地址管理
const ipAddress = ref("127.0.0.1"); // 实际应用中应从实例信息中获取
const copied = ref(false);
const showMessage = ref(false);

/**
 * 复制IP地址到剪贴板
 */
const copyIpAddress = () => {
  if (ipAddress.value) {
    navigator.clipboard.writeText(ipAddress.value)
      .then(() => {
        copied.value = true;
        showMessage.value = true;
        setTimeout(() => {
          copied.value = false;
          showMessage.value = false;
        }, 2000);
        MessagePlugin.success('IP地址已复制到剪贴板');
      })
      .catch(err => {
        MessagePlugin.error('复制失败');
        console.error('复制失败:', err);
      });
  }
};

// 实例状态相关的计算属性
const innerTerminalType = computed(() => props.card.width === 12 && viewType === "inner");
const instanceTypeText = computed(() => INSTANCE_TYPE_TRANSLATION[instanceInfo.value?.config.type ?? -1]);
const updateCmd = computed(() => (instanceInfo.value?.config.updateCommand ? true : false));
const instanceStatusText = computed(() => INSTANCE_STATUS[instanceInfo.value?.status ?? -1]);
const getInstanceName = computed(() => {
  if (instanceInfo.value?.config.nickname === GLOBAL_INSTANCE_NAME) {
    return t("TXT_CODE_5bdaf23d");
  } else {
    return instanceInfo.value?.config.nickname;
  }
});

// 图标组件映射
const iconComponents = {
  PlayCircleOutlined,
  PauseCircleOutlined,
  RedoOutlined,
  CloseOutlined,
  CloudDownloadOutlined,
  InteractionOutlined,
  MoneyCollectOutlined,
  CheckCircleOutlined,
  InfoCircleOutlined,
  LoadingOutlined,
  CloudServerOutlined,
  LaptopOutlined,
  DownOutlined
};

/**
 * 实例快速操作按钮配置
 */
const quickOperations = computed(() =>
  arrayFilter([
    {
      title: t("TXT_CODE_57245e94"), // 启动
      icon: iconComponents.PlayCircleOutlined,
      noConfirm: false,
      type: "default",
      click: handlePowerOn,
      props: {},
      condition: () => isStopped.value
    },
    {
      title: t("TXT_CODE_b1dedda3"), // 停止
      icon: iconComponents.PauseCircleOutlined,
      type: "default",
      click: handlePowerOff,
      props: {
        danger: true
      },
      condition: () => isRunning.value
    }
  ])
);

/**
 * 实例高级操作按钮配置
 */
const instanceOperations = computed(() =>
  arrayFilter([
    {
      title: t("TXT_CODE_47dcfa5"), // 重启
      icon: iconComponents.RedoOutlined,
      type: "default",
      noConfirm: false,
      click: handleRestart,
      condition: () => isRunning.value
    },
    {
      title: t("TXT_CODE_7b67813a"), // 终止
      icon: iconComponents.CloseOutlined,
      type: "danger",
      click: handleKill,
      condition: () => !isStopped.value
    },
    {
      title: t("TXT_CODE_40ca4f2"), // 更新
      type: "default",
      icon: iconComponents.CloudDownloadOutlined,
      click: handleUpdate,
      condition: () => isStopped.value && updateCmd.value
    },
    {
      title: t("TXT_CODE_b19ed1dd"), // 重装
      icon: iconComponents.InteractionOutlined,
      noConfirm: true,
      click: () => reinstallDialog.value?.openDialog(),
      props: {},
      condition: () =>
        isStopped.value &&
        (state.settings.allowUsePreset || isAdmin.value) &&
        !isGlobalTerminal.value
    },
    {
      title: t("TXT_CODE_f77093c8"), // 使用兑换码
      icon: iconComponents.MoneyCollectOutlined,
      noConfirm: true,
      click: handleUseRedeem,
      props: {},
      condition: () => state.settings.businessMode
    }
  ])
);

// 实例管理操作下拉菜单
const moreOptions = [
  { content: '重装实例', value: 'reinstall' },
  { content: '退还系统', value: 'return' },
  { content: '编辑标签', value: 'editTags' },
  { content: '升级套餐', value: 'upgrade' },
];

/**
 * 处理更多操作菜单点击事件
 */
const handleMoreOptions = (dropdownItem: any) => {
  switch (dropdownItem.value) {
    case 'reinstall':
      reinstallDialog.value?.openDialog();
      break;
    case 'return':
      // 实现退还系统逻辑
      MessagePlugin.info('退还系统功能待实现');
      break;
    case 'editTags':
      // 实现编辑标签逻辑
      MessagePlugin.info('编辑标签功能待实现');
      break;
    case 'upgrade':
      // 实现升级套餐逻辑
      MessagePlugin.info('升级套餐功能待实现');
      break;
  }
};

/**
 * 实例操作方法
 */
// 启动实例
const handlePowerOn = async () => {
  try {
    await openInstance().execute({
      params: {
        uuid: instanceId || "",
        daemonId: daemonId || ""
      }
    });
    MessagePlugin.success('实例启动命令已发送');
  } catch (error: any) {
    reportErrorMsg(error);
  }
};

// 关闭实例
const handlePowerOff = async () => {
  try {
    await stopInstance().execute({
      params: {
        uuid: instanceId || "",
        daemonId: daemonId || ""
      }
    });
    MessagePlugin.success('实例停止命令已发送');
  } catch (error: any) {
    reportErrorMsg(error);
  }
};

// 重启实例
const handleRestart = async () => {
  try {
    await restartInstance().execute({
      params: {
        uuid: instanceId || "",
        daemonId: daemonId || ""
      }
    });
    MessagePlugin.success('实例重启命令已发送');
  } catch (error: any) {
    reportErrorMsg(error);
  }
};

// 终止实例
const handleKill = async () => {
  try {
    await killInstance().execute({
      params: {
        uuid: instanceId || "",
        daemonId: daemonId || ""
      }
    });
    MessagePlugin.success('实例终止命令已发送');
  } catch (error: any) {
    reportErrorMsg(error);
  }
};

// 更新实例
const handleUpdate = async () => {
  try {
    await updateInstance().execute({
      params: {
        uuid: instanceId || "",
        daemonId: daemonId || "",
        task_name: "update"
      },
      data: {
        time: new Date().getTime()
      }
    });
    MessagePlugin.success('实例更新命令已发送');
  } catch (error: any) {
    reportErrorMsg(error);
  }
};

// 使用兑换码
const handleUseRedeem = () => {
  useMountComponent({
    instanceId: instanceId
  }).mount(UseRedeemDialog);
};
import { ref, onMounted } from "vue";
import { getInstanceConfigByType, type InstanceConfigs } from "@/hooks/useInstance";
const type = "minecraft/java";
// 应用配置和教程数据
const configData = ref([
  { parameter: 'CPU', value: '4核', description: '应用可使用的CPU核心数' },
  { parameter: '内存', value: '8GB', description: '应用可使用的最大内存' },
  { parameter: 'Java版本', value: 'OpenJDK 17', description: 'Java运行环境版本' },
  { parameter: '最大玩家数', value: '20', description: '服务器允许的最大同时在线玩家数' },
]);

const configList = ref<InstanceConfigs[]>([]);
const firstDetail = ref<any[]>([]);
const errorMsg = ref('');


// 封装加载数据的函数
const loadConfigData = async () => {
  try {
    const result = await fetchConfigListAndFirstDetail(type, instanceId, daemonId);
    configList.value = result.list;
    configData.value = result.detailed;
  } catch (error: any) {
    errorMsg.value = error.message || t('TXT_CODE_default_error');
  }
};

onMounted(async () => {
  await loadConfigData();
  console.log(configData)
});
console.log(configData)
const configColumns = [
  { colKey: 'parameter', title: '参数名', width: '20%' },
  { colKey: 'value', title: '当前值', width: '20%' },
  { colKey: 'description', title: '描述' },
];

const faqs = [
  'Minecraft服务器如何添加模组?',
  '如何设置服务器白名单?',
  '如何备份我的游戏存档?',
  '如何修改服务器配置文件?'
];

const tutorials = [
  'Minecraft服务器安装教程',
  '模组服务器配置指南',
  '服务器性能优化指南',
  '常见问题排查和解决'
];

const importOptions = [
  { content: '从本地导入', value: 'local' },
  { content: '从云端导入', value: 'cloud' },
  { content: '从备份还原', value: 'backup' }
];

// 移动端操作菜单
const dropdownOptions = computed(() => {
  return [...quickOperations.value, ...instanceOperations.value].map(item => {
    return {
      content: item.title,
      value: item.title,
      onClick: item.click
    };
  });
});

// 实例操作菜单
const instanceOperationsOptions = computed(() => {
  return instanceOperations.value.map(item => {
    return {
      content: item.title,
      value: item.title,
      onClick: item.click
    };
  });
});

// 页面初始化
onMounted(async () => {
  try {
    if (instanceId && daemonId) {
      await execute({
        instanceId,
        daemonId
      });
    }
  } catch (error: any) {
    console.error(error);
    MessagePlugin.error('实例信息加载失败');
  }
});

// 监听实例状态变化
watch(() => instanceInfo.value?.status, (newStatus, oldStatus) => {
  if (newStatus !== oldStatus) {
    console.log('实例状态变更为:', INSTANCE_STATUS[newStatus ?? -1]);
  }
});
</script>

<template>
  <!-- 顶部导航栏 -->
  <t-head-menu theme="light" style="padding: 0 10px; gap: 10px; margin-left: 0;">   

    <t-space align="center" wrap>
      <a  href="../" class="mr-2" style="font-size: 20px; display: flex; align-items: center;margin-left: -18px;">
        <t-icon name="arrow-left" size="large" />
      </a>
      <!-- 返回按钮 -->
   
      <!-- 实例名称 -->
      <h2 :style="{ margin: 0, fontSize: isPhone ? 'calc(0.8rem + 0.2vw)' : 'calc(1rem + 0.3vw)' }">{{ getInstanceName || '加载中...' }}</h2>
      <!-- 地域标签 -->
      <t-tag theme="default" style="margin-left: 8px">北京</t-tag>
      
      <!-- IP地址显示和复制 - 桌面版显示 -->
      <div v-if="!isPhone" class="ip-container">
        <span class="ip-label">IPv4</span>
        <small class="ip-input" readonly>{{ ipAddress }}</small>
        <button class="copy-button" title="复制到剪贴板" @click="copyIpAddress">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
            <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path>
          </svg>
        </button>
      </div>
      <!-- 移动端ip地址 -->
      <t-space v-if="isPhone" wrap size="small">
        <small class="ip-input" readonly>{{ ipAddress }}</small>
      </t-space>

      <t-space v-if="isPhone" wrap size="small">
        <!-- 合并其他按钮到下拉菜单 -->
        <t-dropdown :options="[
            { content: '开机', value: 'power-on', onClick: handlePowerOn, disabled: !isStopped },
            { content: '关机', value: 'power-off', onClick: handlePowerOff, disabled: !isRunning },
            { content: '重启', value: 'restart', onClick: handleRestart, disabled: !isRunning },
            { content: '重置密码', value: 'reset-password' },
            { content: '续费', value: 'renew' },
            ...moreOptions
          ]" 
          placement="bottom-right">
          <t-button size="small" variant="outline">
            操作
            <template #suffix><t-icon name="chevron-down" size="16" /></template>
        </t-button>
      </t-dropdown>
    </t-space>
    </t-space>

    <!-- 操作按钮组 -->
    <div :style="{ marginLeft: isPhone ? '0' : 'auto', marginTop: isPhone ? '10px' : '0' }">
      <!-- 桌面版按钮组 -->
      <t-space v-if="!isPhone">
        <t-button @click="handlePowerOn" :disabled="!isStopped" theme="primary">
          <span>开机</span>
        </t-button>
        <t-button theme="default" variant="outline" @click="handlePowerOff" :disabled="!isRunning">
          <span>关机</span>
        </t-button>
        <t-button theme="default" variant="outline" @click="handleRestart" :disabled="!isRunning">
          <span>重启</span>
        </t-button>
        <t-button theme="default" variant="outline">
          <span>重置密码</span>
        </t-button>
        <t-button theme="default" variant="outline">
          <span>续费</span>
        </t-button>
        <!-- 更多操作下拉菜单 -->
        <t-dropdown :options="moreOptions" trigger="click" @click="handleMoreOptions" :min-column-width="100">
          <t-button variant="outline">
            更多操作
            <template #suffix> <t-icon name="chevron-down" size="16" /></template>
          </t-button>
        </t-dropdown>
      </t-space>
      
      <!-- 移动版按钮组 -->
      <t-space v-else wrap size="small">
        <!-- 合并其他按钮到下拉菜单 -->
        <t-dropdown :options="[
            { content: '开机', value: 'power-on', onClick: handlePowerOn, disabled: !isStopped },
            { content: '关机', value: 'power-off', onClick: handlePowerOff, disabled: !isRunning },
            { content: '重启', value: 'restart', onClick: handleRestart, disabled: !isRunning },
            { content: '重置密码', value: 'reset-password' },
            { content: '续费', value: 'renew' },
            ...moreOptions
          ]" 
          placement="bottom-right">
          <t-button size="small" variant="outline">
            操作
            <template #suffix><t-icon name="chevron-down" size="16" /></template>
          </t-button>
        </t-dropdown>
      </t-space>
    </div>
  </t-head-menu>

  <!-- 标签页内容 -->
  <t-tabs>
    <!-- 实例概要标签页 -->
    <t-tab-panel value="gy" label="概要" :destroyOnHide="false">
      <div style="padding: 12px; display: flex; justify-content: space-between;">
        <div style="width: 100%;">
          <InstanceBaseInfo :instance-info="instanceInfo" :card="card" />
        </div>
      </div>
    </t-tab-panel>

    <!-- 应用详情标签页 -->
    <t-tab-panel value="info" label="应用详情" :destroyOnHide="false">
      <div style="padding-top:8px"></div>
      <t-alert style="margin:0px 0px 8px 0px;border-radius: 0px;" theme="info" message="某三方应用正在尝试访问并使用" class="t-margin-bottom-16" />

      <div class="server-management-app">
        <!-- 通知提醒 -->
        
        <!-- 主要内容区 -->
        <t-row :gutter="[16, 16]">
          <!-- 左侧面板 - 应用管理 -->
          <t-col :xs="12" :lg="8">
            <t-card title="应用管理与操作" bordered class="tb lh">
              <!-- 卡片标题 -->
              <template #title>
                <t-space>
                  <span>应用管理与操作</span>
                 
                </t-space>
              </template>
  
              <!-- 卡片底部 -->
              <template #actions>
                <t-tag theme="success" variant="light">代理享受10折优惠</t-tag>
          
              </template>

              <!-- 运行状态和    <t-space align="center">
                  <t-avatar>土</t-avatar>
                  <span>土豆帕帕</span>
                </t-space>
                操作按钮 -->
              <t-space class="list" direction="vertical" size="medium" style="width: 100%">
                <!-- 运行状态 -->
                <t-space align="center">

                  <div class="info-a">运行状态:</div>
                  <div class="info-b">
                  <t-tag :theme="isRunning ? 'primary' : 'default'" variant="light">
                    {{ instanceStatusText }}
                  </t-tag></div>
                </t-space>
                
                <!-- 快捷操作按钮 -->
                
                <t-space>
                  <div class="info-a">应用管理:</div>
                  
                  <t-button class="actbtn" theme="primary" size="medium" :disabled="!isStopped" @click="handlePowerOn">启动</t-button>
                  <t-button class="actbtn"  theme="danger" size="medium" :disabled="!isRunning" @click="handlePowerOff">停止</t-button>
                  <t-button  class="actbtn" variant="outline" size="medium" :disabled="!isRunning" @click="handleRestart">重启</t-button>
                </t-space>
                <t-space wrap>
                <!-- 文件操作按钮 -->
                <div class="info-a">常用操作:</div><div class="info-b" ><t-space breakLine wrap>
                  
                  
                  <t-button class="actbtn"  variant="outline" size="medium">导出存档</t-button>
                  <t-button class="actbtn"  variant="outline" size="medium">定时备份存档</t-button>
                  <t-button class="actbtn"  variant="outline" size="medium">云备份存档</t-button>
                  <t-dropdown :options="importOptions">
                    <t-button class="actbtn"  variant="outline" size="medium">导入存档 <t-icon name="chevron-down" /></t-button>
                  </t-dropdown>
                  <t-button class="actbtn"  variant="outline" size="medium" :disabled="!updateCmd" @click="handleUpdate">更新游戏</t-button>
                  <t-button class="actbtn"  variant="outline" size="medium">设置运行插件</t-button>
                  <t-button  class="actbtn"  variant="outline" size="medium">设置Swap</t-button>
                </t-space>
</div>  </t-space>
                <!-- 配置参数区 -->
               
               
              </t-space>
            </t-card>
           <div style="padding-top:18px"></div>
            <t-card  bordered class="tb">
              <t-space direction="vertical" size="medium" style="width: 100%">
                <!-- 帮助标题 -->
                
                    
                <div class="spacebtw" style="width: 100%">
                  <h3 level="h5">应用配置</h3>
                  <div style="flex:1 1 auto"></div>
                 
                  <t-button class="actbtn" theme="" variant="outline" size="medium">
                    <template #icon> <t-icon name="edit" />调整参数 </template >
                  </t-button>
                </div>
               
                <!-- 配置参数表格 -->
                <t-table :data="configData" :columns="configColumns" size="small" :pagination="{ pageSize: 10 }" stripe
                  bordered style="width: 100%" />
                
              </t-space>
            </t-card>



          </t-col>

          <!-- 右侧面板 - 帮助中心 -->
          <t-col :xs="12" :lg="4">
            <t-card bordered class="tb ">
              
              <div  class="aiguide" ></div>
              
              <t-space  direction="vertical" size="medium" style="width: 100% ;">
                <!-- 帮助标题 -->
            
                <div style="z-index:122;position: relative;" >    
                <t-space >
                  
                  <h3  level="h5" style="margin: 0"><img alt="" class="ai-logo" src="https://cloudcache.tencent-cloud.com/qcloud/ui/static/other_external_resource/d8b36472-a9ed-4d47-bd8c-88c46a47953d.png">AI小助手</h3>
                  
                </t-space>
                <t-paragraph  theme="secondary" class="info-c">
                  由第三方应用插件提供技术支持，请注意遵循相应规范
                </t-paragraph></div>
                <!-- 问题搜索 -->
                <t-card bordered class="colorful ">
                  <div class="colorinner">
                    <t-space direction="vertical" size="small" style="width: 100%;height: 100%;">
                    <t-space>
                      <t-icon name="filter-3-filled" />
                      <span style="font-weight:400;">您想了解什么问题?</span>
                    </t-space>

                    <t-input placeholder="请输入您的问题，按Enter搜索" />

                   
                  </t-space>
                </div>
                </t-card>
                <t-space style="color: #999; font-size: 12px">
                    
                    <t-button shape="round" size="small"   theme="default">
                      <template #icon><TimeIcon /></template>
                      历史记录
                    </t-button>
                  
                    <span>今日已解决: 13</span>
                    <span>昨日可解决: 125</span>
                  </t-space>
                <!-- 常见问题列表 -->
                <t-space direction="vertical" style="width: 100%;padding-top:8px">
                  

                  <t-button  shape="round"  variant="outline" v-for="(faq, index) in faqs" :key="`faq-${index}`"  align="left">
                    {{ faq }}
                  </t-button>
                </t-space>

                <!-- 常用教程列表 -->
             
             
              </t-space>
            </t-card>
            <div style="padding-top:18px"></div>
            <t-card  bordered class="tb">
              <t-space direction="vertical" size="medium" style="width: 100%">
                <!-- 帮助标题 -->
            
                <h3 level="h5" >常用教程</h3>
                <t-space direction="vertical" style="width: 100%">
                  <t-button class="helper"  v-for="(tutorial, index) in tutorials" :key="`tutorial-${index}`" variant="text" block
                    align="left">
                    {{ tutorial }}
                    <div style="flex: 1 1 auto;width: 100%;" ></div>
                    <template #suffix>
                      <t-icon name="chevron-right" />
                    </template>
                  </t-button>
                </t-space>
                
              </t-space>
            </t-card>

            



          </t-col>

          <t-col :xs="12" :lg="4">
           
          </t-col>



        </t-row>
      </div>

      <!-- 实例信息 -->

    </t-tab-panel>

    <!-- 终端标签页 -->
    <t-tab-panel value="terminal" label="终端" :destroyOnHide="false">
      <TerminalCore v-if="instanceId && daemonId" :instance-id="instanceId" :daemon-id="daemonId"
        :height="card.height" />
    </t-tab-panel>

    <!-- 游戏配置标签页 -->
    <t-tab-panel value="game" label="游戏配置" :destroyOnHide="false">
      <!-- 此处可添加游戏配置组件 -->
     <InstanceBtns :instance-info="instanceInfo" :card="card" /> 
     <InstanceServerConfigOverview :instance-info="instanceInfo" :card="card"  type="minecraft/java" /> 
    </t-tab-panel>

    <!-- 文件管理标签页 -->
    <t-tab-panel value="file" label="文件管理" :destroyOnHide="false">
      <InstanceFileManager :instance-info="instanceInfo" :card="card" />
    </t-tab-panel>

    <!-- 设置标签页 -->
    <t-tab-panel value="setting" label="设置" :destroyOnHide="false">
      <div style="padding: 25px">
        <t-list bordered>
          <!-- 此处可添加设置选项 -->
        </t-list>
      </div>
    </t-tab-panel>
  </t-tabs>

  <!-- 终端页面内嵌视图 -->
  <div v-if="innerTerminalType">
    <div class="mb-24">
      <div class="between-menus">
        <div class="align-center">
          <t-space align="center">
            <h3 class="mb-0 mr-12" level="h4">
              <t-icon name="server" />
              <span class="ml-6"> {{ getInstanceName }} </span>
            </h3>
            <t-paragraph v-if="!isPhone" class="mb-0 ml-4">
              <span class="ml-6">
                <t-tag v-if="isRunning" theme="success">
                  <template #icon><t-icon name="check-circle-filled" /></template>
                  {{ instanceStatusText }}
                </t-tag>
                <t-tag v-else-if="isBuys" theme="danger">
                  <template #icon><t-icon name="loading" /></template>
                  {{ instanceStatusText }}
                </t-tag>
                <t-tag v-else theme="default">
                  <template #icon><t-icon name="info-circle" /></template>
                  {{ instanceStatusText }}
                </t-tag>
              </span>

              <t-tag theme="primary"> {{ instanceTypeText }} </t-tag>

              <span v-if="instanceInfo?.watcher && instanceInfo?.watcher > 1 && !isPhone" class="ml-16">
                <t-tooltip content="在线人数">
                  <t-icon name="laptop" />
                </t-tooltip>
                <span class="ml-6" style="opacity: 0.8">
                  {{ instanceInfo?.watcher }}
                </span>
              </span>
            </t-paragraph>
          </t-space>
        </div>

        <!-- 操作按钮 - PC端 -->
        <div>
          <div v-if="!isPhone">
            <template v-for="item in [...quickOperations, ...instanceOperations]" :key="item.title">
              <t-button v-if="item.noConfirm && item.condition()" class="ml-8"
                :theme="item.type === 'danger' ? 'danger' : 'default'" @click="item.click">
                <template #icon>
                  <component :is="item.icon || 'div'" />
                </template>
                {{ item.title }}
              </t-button>
              <t-popconfirm v-else-if="item.condition()" :key="item.title" :content="t('TXT_CODE_276756b2')"
                @confirm="item.click">
                <t-button class="ml-8" :theme="item.type === 'danger' ? 'danger' : 'default'">
                  <template #icon>
                    <component :is="item.icon || 'div'" />
                  </template>
                  {{ item.title }}
                </t-button>
              </t-popconfirm>
            </template>
          </div>

          <t-dropdown v-else :options="dropdownOptions">
            <t-button theme="primary">
              {{ t("TXT_CODE_fe731dfc") }}
              <template #suffix><t-icon name="chevron-down" /></template>
            </t-button>
          </t-dropdown>
        </div>
      </div>
    </div>
  </div>

  <!-- Other Page View -->
<t-card v-else class="containerWrapper" style="height: 100%">
    <template #title>
      <t-icon name="server" />
      <span class="ml-8"> {{ getInstanceName }} </span>
      <span class="ml-8">
        <t-tag v-if="isRunning" theme="success">
          <template #icon><t-icon name="check-circle-filled" /></template>
          {{ instanceStatusText }}
        </t-tag>
        <t-tag v-else-if="isBuys" theme="danger">
          <template #icon><t-icon name="loading" /></template>
          {{ instanceStatusText }}
        </t-tag>
        <t-tag v-else theme="default">
          <template #icon><t-icon name="info-circle" /></template>
          {{ instanceStatusText }}
        </t-tag>
        <t-tag theme="primary"> {{ instanceTypeText }} </t-tag>
      </span>
    </template>
    <template #actions>
      <t-space>
        <template v-for="item in quickOperations" :key="item.title">
          <t-tooltip :content="item.title">
            <t-button variant="text" shape="square" :theme="item.type === 'danger' ? 'danger' : 'default'"
              @click="item.click">
              <template #icon>
                <component :is="item.icon || 'div'" />
              </template>
            </t-button>
          </t-tooltip>
        </template>
        <t-dropdown :options="instanceOperationsOptions">
          <t-button variant="text" shape="square">
            <template #icon><t-icon name="chevron-down" /></template>
          </t-button>
        </t-dropdown>
      </t-space>
    </template>
    <TerminalCore v-if="instanceId && daemonId" :instance-id="instanceId" :daemon-id="daemonId" :height="card.height" />
  </t-card> 

  <Reinstall ref="reinstallDialog" :daemon-id="daemonId ?? ''" :instance-id="instanceId ?? ''" />



</template>

<style lang="scss" scoped>
.spacebtw:nth-child(2){
  flex: 1 1 auto;

}
.spacebtw{
  padding-top: 8px;
  justify-content:space-between;
  display: flex;
}
.helper{
justify-content:space-between;
padding-left: 0px;
max-height: 18px;
color: grey;
font-size: 12px;

}
.colorinner{
    position: absolute;
    inset: 1px;
    padding: 12px;
    z-index: 1;
    background: rgb(255, 255, 255);
    box-sizing: border-box;
    border-radius: 4px;
   
}
.colorful{
  height:100px;
  background: linear-gradient(81deg, rgb(213, 119, 253) 3.77%, rgb(224, 119, 253) 13.16%, rgb(184, 121, 253) 22.56%, rgb(136, 125, 253) 31.95%, rgb(71, 129, 254) 46.04%, rgb(0, 135, 255) 63.43%, rgb(15, 143, 255) 72.35%, rgb(15, 143, 255) 82.21%, rgb(0, 228, 237) 91.14%);
}

.info-c{
  font-size: 14px; color:grey !important
}
.ai-logo {
    width: 32px;
    height: 32px;
    margin-left: -8px;
}
.actbtn{
  border-radius: 0px;

}
.info-a{

display: inline-flex
;
  align-items: center;
  white-space: nowrap;
  font-size: var(12px);
  transform: translateZ(0);
  vertical-align: baseline;
  color: #00000080;
  padding-right: 20px;
  padding-top: calc(30px/ 2 - 9px);
  padding-bottom: calc(30px/ 2 - 9px);

}
.info-b{
padding: 6px 24px 16px 0px;
display: table-cell;
  vertical-align: top;
  padding-bottom: 16px;
  word-wrap: break-word;
  word-break: break-word;
  padding-right: 24px;
  width: 100%;
  padding-top: calc(30px/ 2 - 9px);
}
.containerWrapper{

display: table;
height: 100%;
width:100%;
}
.aiguide::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 263px;
    top: 0px;
    left: 0px;
    background: linear-gradient(rgb(222, 235, 255), rgba(255, 255, 255, 0));
}
.lh {
    background-image: url();
    background-repeat: no-repeat;
    background-size:cover;
    background-position: 100% top;
    padding: 24px 24px 20px;
}
.tb{
    background-color: #fff;
    border: 0px solid #fff;
    box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.05) !important;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    border-radius : 0px !important;
    color: rgba(0,0,0,0.9);
    transition: box-shadow .3 sease-in 0s;
   
}
        .ip-container {
            display: flex;
            align-items: center;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 0;
            background-color: white;
            height: 27px;
            width: 180px;
            overflow: hidden;
        }

        .ip-label {
            background-color: white;
            color: #8B0000;
            font-weight: bold;
            padding: 8px 10px;
            font-size: 14px;
            border-right: 1px solid #eee;
        }

        .ip-input {
            flex-grow: 1;
            border: none;
            padding: 8px 10px;
            font-size: 14px;
            outline: none;
            color: #333;
        }

        .copy-button {
            background: none;
            border: none;
            cursor: pointer;
            padding: 8px 10px;
            color: #999;
            font-size: 16px;
            display: flex;
            align-items: center;
        }

        .copy-button:hover {
            color: #666;
        }
.t-tab-panel {
  background-color: #f2f4f8;
}

.between-menus {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.error-card {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 10;
  border-radius: 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  .error-card-container {
    overflow: hidden;
    max-width: 440px;
    border: 1px solid var(--td-gray-color-6) !important;
    background-color: var(--td-gray-color-1);
    border-radius: 4px;
    padding: 12px;
    box-shadow: 0px 0px 2px var(--td-gray-color-7);
  }

  @media (max-width: 992px) {
    .error-card-container {
      max-width: 90vw !important;
    }
  }
}

.console-wrapper {
  position: relative;

  .terminal-loading {
    z-index: 12;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .terminal-wrapper {
    border: 1px solid var(--td-component-border);
    position: relative;
    overflow: hidden;
    height: 100%;
    background-color: #1e1e1e;
    padding: 8px;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .terminal-container {
      height: 100%;
    }

    margin-bottom: 12px;
  }

  .command-input {
    position: relative;

    .history {
      display: flex;
      max-width: 100%;
      overflow: scroll;
      z-index: 10;
      position: absolute;
      top: -35px;
      left: 0;

      li {
        list-style: none;

        span {
          padding: 3px 20px;
          max-width: 300px;
          overflow: hidden;
          text-overflow: ellipsis;
          cursor: pointer;
        }
      }

      &::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
      }
    }
  }
}
</style>
